<template>
  <div class="container order-wrap">
    <div class="container-top">
      <div class="top-name">激活订单</div>
    </div>
    <div class="input_modal">
      <div class="modal-list">
        <div class="input-item">
          <span class="name">订单编号：</span>
          <el-input
            v-model="searchParams.orderCodeLike"
            placeholder="请输入"
            class="proName"
            @keyup.enter.native="searchCity"
          />
        </div>
        <div class="input-item">
          <span class="name">商品标题：</span>
          <el-input
            v-model="searchParams.productTitleLike"
            placeholder="请输入"
            class="proName"
            @keyup.enter.native="searchCity"
          />
        </div>
      </div>
      <div class="modal-list">
        <div class="input-item">
          <span class="name">User ID：</span>
          <el-input
            v-model="searchParams.userIdLike"
            placeholder="请输入"
            class="proName"
            @keyup.enter.native="searchCity"
          />
        </div>
        <div class="input-item">
          <span class="name">用户手机号：</span>
          <el-input
            v-model="searchParams.mobileLike"
            placeholder="请输入"
            class="proName"
            @keyup.enter.native="searchCity"
          />
        </div>
      </div>
      <div class="modal-list">
        <div class="input-item">
          <span class="name">供应商：</span>
          <el-input
            v-model="searchParams.supplierLike"
            placeholder="请输入"
            class="proName"
            @keyup.enter.native="searchCity"
          />
        </div>
       <div class="input-item">
          <span class="name">订单状态：</span>
          <el-select v-model="searchParams.actionOrderStatus" placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
       <div class="modal-list">
       <div class="input-item">
          <span class="name">更新时间：</span>
          <el-date-picker
            v-model="dateArr"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            style="width:260px"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleChangeDate"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="btns-top">
        <el-button type="primary" size="mini" @click="exportOrder()" icon="el-icon-download">批量导出</el-button>
        <el-button type="primary" size="mini" @click="exportIn">导入发货</el-button>
        <el-button type="primary" size="mini" @click="getList()" icon="el-icon-search">查询</el-button>
        <el-button
            size="mini"
            icon="el-icon-refresh"
            @click="refresh"
          >重置</el-button>
      </div>
    </div>
    <div class="table_con">
      <el-table
        :data="tableData"
        stripe
        v-loading="loading"
       >
       <el-table-column prop="orderCode" label="订单编号" >
        </el-table-column>
        <el-table-column prop="productTitle" width='240' label="商品标题" >
          <template slot-scope="scope">
              <div :title="scope.row.productTitle" class="name-table">{{scope.row.productTitle}}</div>
            </template>
        </el-table-column>
        <el-table-column prop="price" label="单价">
        </el-table-column>
        <el-table-column prop="count" label="数量">
        </el-table-column>
        <!-- <el-table-column prop="supplier" label="供应商">
        </el-table-column> -->
        <el-table-column prop="actionOrderStatus" label="订单状态">
           <template slot-scope="scope">
              {{returnState(scope.row.actionOrderStatus)}}
            </template>
        </el-table-column>
        <el-table-column prop="price" label="订单金额">
        </el-table-column>
        <el-table-column prop="gmtModified" label="创单时间" >
         </el-table-column>
          <el-table-column prop="userId" label="User Id" >
         </el-table-column>
          <el-table-column prop="mobile" label="用户手机" >
         </el-table-column>
        <el-table-column prop="" label="操作" width='240'>
          <template slot-scope="scope">
            <el-button icon="el-icon-view" type="primary" size="mini" @click="$router.push('/goodOrderDetail?orderCode='+scope.row.orderCode )">查看</el-button>
            <el-button @click="sendProduct(scope.row)"  type="primary" size="mini" v-if="scope.row.actionOrderStatus == 'WAIT_SEND'">发货</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>
    <el-dialog title="发货信息" :visible.sync="dialogVisible" width="60%">
       <el-form
        label-width="100px"
      >
        <div  class="table-cate">
          <div class="table-head">
            <div class="head-list">物流公司</div>
            <div class="head-list">物流单号</div>
            <div class="head-list">备注</div>
          </div>
          <div
            v-for="(item,index) in param.logisticsList"
            :key="index"
            class="table-item"
           >
            <div class="table-list">
              <el-select filterable v-model="item.logisticsCompany">
                <el-option v-for="(item,index) in selectArr" :key="index" :value="item.value" :label="item.value"></el-option>
              </el-select>
            </div>
            <div class="table-list">
               <el-input
                v-model="item.logistics"
                placeholder="请输入"
                maxLength="30"
              ></el-input> 
            </div>
            <div class="table-list">
               <el-input
                v-model="item.remark"
                placeholder="请输入"
                maxLength="60"
              ></el-input>
            </div>
            <i v-if="param.logisticsList.length>1" @click="deleteAddress(i)" class="el-icon-delete"></i>
          </div>
          <div style="margin-top:20px;text-align:right" class="add-wrap">
            <el-button type="primary" size="mini" @click="addAddressBtn">新 增</el-button>
          </div>
        </div>
       </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sendBtn">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog
        title="批量导入"
        :visible.sync="dialogVisible1"
        width="40%"
       >
        <el-upload
          class="upload-demo"
          style="margin:0 auto;width:400px;"
          drag
          :file-list="fileList1"
          :action="importUrl"
          :headers="{sessionId:sessionId}"
          :on-success="handUploadSuccess"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-dialog>
  </div>
</template>

<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  export default {
    data() {
      return {
        dialogVisible:false,
        tableData: [],
        searchParams: {
          productTitleLike: "",
          gmtCreatedGE: "",
          gmtCreatedLE: "",
          userIdLike: "",
          mobileLike: "",
          actionOrderStatus: "",
          contactName: "",
          telNumber: "",
          orderCodeLike:"",
          supplierLike:""
        },
        param:{
          "orderCode": "",
          "logisticsList":[
            {
              logistics:'',
              logisticsCompany:'',
              remark:''
            }
          ]
        },
        dateArr: [],
        pageCount: null,
        pageIndex: 1,
        pageSize: 10,
        loading: true,
        id: "",
        name: "",
        statusDict: {
          "WAIT_SEND":"待发货",
          "WAIT_PAY": "未付款",
          "WAIT_GET": "待收货",
          "EVALUATION": "待评价",
          "CANCEL_TIMEOUT": "超时取消"
        },
        statusList: [{
          label: "全部",
          value: "",
        },{
          label: "待发货",
          value: "WAIT_SEND",
        },{
          label: "未付款",
          value: "WAIT_PAY",
        },{
          label: "待收货",
          value: "WAIT_GET",
        },{
          label: "待评价",
          value: "EVALUATION",
        },{
          label: "超时取消",
          value: "CANCEL_TIMEOUT",
        },
         {
           label: "已完成",
           value: "COMPLETED",
         }
        ],
        refundStatusList: [{
          label: "默认",
          value: "NORMAL"
        },{
          label: "待审核",
          value: "WAIT_AUDIT"
        },{
          label: "处理中",
          value: "IN_PROCESS"
        },{
          label: "售后成功",
          value: "SUCCESS"
        },{
          label: "售后失败",
          value: "FAILURE"
        }],
        refundTypeList: [{
          label: "默认",
          value: "NORMAL"
        },{
          label: "仅退款",
          value: "ONLYREFUND"
        },{
          label: "退货",
          value: "REFUND_GOODS"
        },{
          label: "换货",
          value: "EXCHANGE_GOODS"
        }],
        codeState:false,
        codeImg:'',
        sessionId:'',
        fileList1:[],
        importUrl:'',
        dialogVisible1:false,
        selectArr:[],
      }
    },
    mounted() {
      this.sessionId = sessionStorage.getItem('sessionId');
      this.importUrl = `${CONSTANT.URL.ORDERTWO.actionOrderSendExcel}?sessionId=${
        this.sessionId
      }`;
      this.getDict()
      this.getList();
    },
    methods: {
      getDict(){
        let url = CONSTANT.URL.SYSTEM.LOADDICTIONARY
        common.get(url, 'exp', res => {
          if (res.code == 200) {
            this.selectArr = res.data.bussData
          }
        })
      },
      exportIn(){
        this.dialogVisible1 = true
      },
      handUploadSuccess(res) {
        if(res.status == '1'){
          this.$message({
            type: "success",
            message: "导入成功!"
          });
          this.getList()
        }else{
          this.$alert( res.error||"导入失败!", '', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
        this.fileList1 = []
        this.dialogVisible1 = false
      },
      codeShow(pic){
        this.codeState = true
        this.codeImg = pic
      },
      returnState(id){
        let str;
        this.statusList.map(item=>{
          if(id==item.value){
            str = item.label
          }
        })
        return str
      },
      refresh(){
        this.pageIndex = 1
        this.dateArr = []
        this.searchParams = {
          productTitleLike: "",
          gmtCreatedGE: "",
          gmtCreatedLE: "",
          userIdLike: "",
          mobileLike: "",
          contactName: "",
          telNumber: "",
          orderCodeLike:"",
          supplierLike:"",
          actionOrderStatus:''
        }
        this.getList()
      },
      sendBtn(){
        let arr = this.param.logisticsList
        let state = false
        arr.map(item=>{
          if(!item.logisticsCompany){
            this.$message({
              type: "warning",
              message: '请输入物流公司'
            });
            state = true
          }
          if(!item.logistics){
            this.$message({
              type: "warning",
              message: '请输入物流单号'
            });
            state = true
          }
        })
        if(state) return
        let url = CONSTANT.URL.ORDERTWO.orderSend;
          common.post(url, this.param, res => {
            if (res.code == 200) {
              this.$message({
                  type: "success",
                  message: "发货成功!"
                });
                this.dialogVisible = false
                this.getList();
            } else {
              this.$message({
                type: "error",
                message: res.data.errMsg
              });
              this.loading = false;
            }
          });
      },
      addAddressBtn(){
        this.param.logisticsList.push({
          logistics:'',
          logisticsCompany:'',
          remark:''
        })
      },
      deleteAddress(i){
        this.param.logisticsList.splice(i,1)
      },
      getList: function() {
        let url = CONSTANT.URL.ORDERTWO.orderList;
        if (this.dateArr && this.dateArr.length ==2) {
          this.searchParams.gmtCreatedGE = this.dateArr[0]
          this.searchParams.gmtCreatedLE = this.dateArr[1]
        }
        let data = Object.assign(this.searchParams, {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        });

        this.loading = true;
        common.post(url, data, res => {
          this.loading = false;
          let data = res.data;
          this.tableData = data.bussData;
          this.pageCount = data.count;
        });
      },
      transferHtml(row, column, cellValue, index) {
        console.log(row, column, cellValue, index)
//        return this.$createElement("div","test")
      },
      sendProduct(obj) {
        this.param = {
          "orderCode":obj.orderCode,
          "logisticsList":[
            {
              logistics:'',
              logisticsCompany:'',
              remark:''
            }
          ]
        }
        this.dialogVisible = true
      },
      deleteItem(id) {
        this.$confirm("确定删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let url = CONSTANT.URL.LIST.DELETEGOOD;
            common.requestAjax(url, null, { id: id }, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getList();
              } else {
                this.$message({
                  type: "warning",
                  message: res.data.errMsg
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      handleCancel(code) {
        this.$confirm("确定取消订单?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let url = CONSTANT.URL.ORDERTWO.cancelOrder;
            common.get(url, code, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "取消成功!"
                });
                this.getList();
              } else {
                this.$message({
                  type: "warning",
                  message: res.msg
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      handleForbid(id) {},
      addItem() {
        this.$router.push("/productEdit");
      },
      editItem(id, type) {
        if (id == 1) {
          this.$router.push({
            name: "homeAdModal",
            query: { id: id, type: type, pageIndex: this.pageIndex }
          });
        } else if (id == 2) {
          this.$router.push({
            name: "homeBanner",
            query: { id: id, type: type, pageIndex: this.pageIndex }
          });
        } else if (id == 3) {
          this.$router.push({
            name: "homeFuncMenu",
            query: { id: id, type: type, pageIndex: this.pageIndex }
          });
        }
      },
      search: function(e) {
        if (e.keyCode == 13) {
          this.pageIndex = 1;
          this.getList();
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.getList();
      },
      searchCity() {},
      exportOrder() {
        const url = CONSTANT.URL.ORDERTWO.orderExport
        this.searchParams.pageSize = 100000
        common.post1(url, this.searchParams, res => {
          var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
          blob = URL.createObjectURL(blob)
          var fileName = "订单.xlsx"
          let link = document.createElement('a')
          link.href = blob
          link.download = fileName
          link.click()
          link.remove()

        })
      },
      handleChangeDate(e) {
        if (e && e.length > 0) {
          this.searchParams.gmtCreatedGE = e[0]
          this.searchParams.gmtCreatedLE = e[1]
        } else {
          this.searchParams.gmtCreatedGE = ''
          this.searchParams.gmtCreatedLE = ''
        }
      }
    },
    filters: {
      formatStatus(value) {
        var list = [];
        list["y"] = "上架";
        list["n"] = "下架";
        if (value) {
          return list[value];
        } else {
          return "--";
        }
      }
    }
  };
</script>

<style lang="scss">
  .el-table__expand-column {
    &:first-child {
      /*display: none;*/
      .cell {
        /*display: none;*/
      }
    }
  }

  .el-table__row.expanded {
    background-color: #dee8fb;
    &:hover {
      background-color: #dee8fb!important;
    }
  }

  .el-table__expanded-cell {
    padding: 0!important;
  }
  .second-table {
    /*margin-left: 48px;*/
      .el-table__header-wrapper{
        display: none;
      }
  }
.order-wrap .table-cate {
  font-size: 14px;
  color: #606266;
  width: 90%;
  margin-left: 4%;
  margin-bottom: 30px;
  .table-head {
    overflow: hidden;
    display: flex;
    background-color: #d1d1d1;
    color: #333;
    .head-list {
      flex: 1;
      float: left;
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
  }
  .no-data{
    border: 1px solid #e1e1e1;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .table-item {
    display: flex;
    position: relative;
    background-color: #fff;
    color: #333;
    border: 1px solid #e1e1e1;
    .el-icon-delete{
      position: absolute;
      right: -20px;
      top: 15px;
      font-size: 15px;
      cursor: pointer;
    }
    .table-list {
      flex: 1;
      float: left;
      text-align: center;
      height: 50px;
      line-height: 50px;
      border-right: 1px solid #e1e1e1;
      .el-input {
        float: left;
        width: 90% !important;
        margin-left: 5%;
        input {
          width: 100% !important;
        }
      }
      &:last-child {
        border-right: 0;
      }
    }
  }
}
</style>
